<template>
    <div ref="lineChart" class="echarts"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue-demi'
let myEchart = null
const lineChart = ref(null)
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const option = ref({
  color: [
    '#719FFA'
  ],
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      textStyle: {
         color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)"
   },
   legend: {
      data: [
         "Ia",
         "Ib",
         "Ic",
      ],
      x: "right",
      textStyle: {
         color: "#8C8C8C",
         fontSize: 12
      },
      //设置字体颜色
      
      top: 10,
      //right: 50,
      itemWidth: 20,
      itemHeight: 10,
      itemGap: 15
   },
   grid: {
      left: '3%',
      right: '3%',
      bottom: '2%',
      containLabel: true
   },
   xAxis: [{
      type: "category",
      axisLabel: {
         color: "#9ca1a1",
         fontSize: 12,
         //字体Roboto
          fontFamily: "Roboto"

      },
      data: [
         "01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
      ],
      axisLine: {
         lineStyle: {
            color: "#9ca1a1"
         }
      }
   }],
   yAxis: [{
      type: "value",
      axisLabel: {
         color: "#8C8C8C",
         fontSize: 12
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: "white"
         }
      },
      nameTextStyle: {
         color: "#A9AEB2",
         fontSize: "12"
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: [
               "#ddd"
            ],
            width: 1,
            type: "solid"
         }
      }
   }],
   series: [
   {
      name: 'Ia',
      type: 'line',
      smooth: true,
      emphasis: {
         focus: 'series'
      },
      //实心椭圆
      symbol: "circle",
      symbolSize: 8,

      data: [
         80, 90, 70, 60, 50, 40, 30, 50, 60, 70
      ],
   },
   {
      name: 'Ib',
      type: 'line',
      smooth: true,
      emphasis: {
         focus: 'series'
      },
      symbol: "circle",
      symbolSize: 8,
      data: [
         70, 55, 36, 55, 42, 30, 25, 24, 23, 21
      ],
   },
   {
      name: 'Ic',
      type: 'line',
      smooth: true,
      emphasis: {
         focus: 'series'
      },
      symbol: "circle",
      symbolSize: 8,
      data: [
         45, 53, 32, 29, 45, 36, 39, 34, 32, 31
      ],
   },
   ]
})

onMounted(() => {
  initPage()

})

//监听props.data的变化
watch(() => props.data.seriesData, (newVal, oldVal) => {
  if (props.data?.seriesData?.length > 0) {
    initPage()
  }
},
{
  deep: true
}
)


//初始化页面
const initPage = ()=>{

   //数据库类型
  const xAxisData = props.data.xAxisData

  let data = [
    {
      name:'数量',
      type:'bar',
      symbolSize: 8,
      data: props.data.seriesData
    }
  ]

  option.value.xAxis[0].data = xAxisData
  option.value.series = data
  //legend
  option.value.legend.data = data.map(item => item.name)
  

  myEchart = echarts.init(lineChart.value)
  myEchart.setOption(option.value)

  window.addEventListener('resize', () => {
    myEchart.resize()
  })
}

onUnmounted(() => {
  echarts.dispose(myEchart)
  window.removeEventListener('resize', () => {
    myEchart.resize()
  })
})
</script>

<style scoped lang="scss">
  .echarts {
    width: 100%;
    height: 240px;
  }
</style>
